<script setup>
import ContentPart from "@/Template/ContentPart.vue";
import {computed, inject} from "vue";
import IntroPart from "@/Template/IntroPart.vue";

const cache = inject("category");

const visibleProject = computed(function () {
  if (cache.value !== 1) {
    return false;
  } else {
    return true;
  }
})


</script>

<template>
  <div class="container">
    <intro-part>
      <template #title></template>
      <template #content>
        熟悉HTML5，CSS，JavaScript主流前端语言，熟练使用vue3构建单页面应用。<br>
        熟练完成前端页面的构建与设计，对前端交互逻辑有自己的理解。
      </template>
    </intro-part>
    <intro-part>
      <template #title>
        项目履历
      </template>
    </intro-part>
    <content-part>
      <template #title>
        vue.mikufans.net 基于vue重构网站
      </template>
      <template #content>
        Mikufans.net 初音未来中文站的全站重构项目。<br>
        前后端结构由我来进行编写，组建，搭建并部署。<br>
        Special thanks to Qi。

      </template>
      <template #disclaim>

      </template>
    </content-part>
    <content-part>
      <template #title>
        mikufans.net 初音未来中文站
      </template>
      <template #content>
        Mikufans.net
        基于WordPress框架的博客网站。<br>
        通过深度专访不同领域创作者，发布多篇创作者专访，面向初音未来的创作者和粉丝群体 传播具有深度的内容。<br>
        主导并执行网站的UI设计，通过精心优化视觉元素，显著增强网站的吸引力和专业水准。<br>
        由我独立通过代码，配合Photoshop完成页面前端设计，确保网站页面符合风格与阅览要求，提升用户体验。<br>
        网站的UI设计通过优化视觉元素，在不同的客户端与屏幕分辨率下拥有良好的兼容性和稳定的加载质量。
      </template>
    </content-part>
  </div>
</template>

<style scoped>
.container {
  display: v-bind(visibleProject ? "flex": "none");
  flex: 0 1;
  flex-flow: column wrap;
  width: 1200px;
}

</style>